<template>
	<view>

		<view class="text-line" style="height: 90upx;background-color: #FFFFFF;margin-left: 0;padding-left: 20upx;">
			<text class="text-name"
				style="flex-grow: 1;color: #333333;font-size: 28upx;">订单编号:{{filterNull(vehicleInfo.orderCarCode)}}</text>

			<!--融租，以租代购， 经租， 直购 -->
			<view class="order-status">{{filterNull(vehicleInfo.rentTypeStr)}}</view>
		</view>

		<view class="item carinfo">
			<view class="carno">{{filterNull(vehicleInfo.carNo)}}</view>
			<view class="carmodel">{{filterNull(vehicleInfo.brandSeriesModelName)}}</view>
			<view class="carusetype">{{filterNull(vehicleInfo.flowStatusStr)}}</view>
			<view class="carmodel">车架号 {{filterNull(vehicleInfo.vinNo)}}</view>
		</view>


		<!-- 交强险 -->
		<view class="item">

			<view class="title-wrap">
				<u-icon name="order" color="#12B9A3" label="交强险保单信息" label-color="#333333"></u-icon>
				<view class="warn-info">
					{{ compulsoryDetail.jqPolicyPrescriptionStr ? compulsoryDetail.jqPolicyPrescriptionStr : '' }}
				</view>
			</view>


			<view v-if="compulsoryDetail!=null">

				<view class="text-line">
					<text class="text-name">交强险开始时间:</text>
					<text class="text-value">{{filterNull(compulsoryDetail.compulsoryStartTime)}}</text>
				</view>

				<view class="text-line">
					<text class="text-name">交强险结束时间:</text>
					<text class="text-value">{{filterNull(compulsoryDetail.compulsoryEndTime)}}</text>
				</view>

				<view class="text-line">
					<text class="text-name">交强险保单号:</text>
					<text class="text-value">{{filterNull(compulsoryDetail.compulsoryNo)}}</text>
				</view>

				<view class="text-line">
					<text class="text-name">保险公司:</text>
					<text class="text-value">{{filterNull(compulsoryDetail.compulsoryCompany)}}</text>
				</view>

				<view class="text-line">
					<text class="text-name">保险公司联系电话:</text>
					<text class="text-value">{{filterNull(compulsoryDetail.compulsoryCompanyPhone)}}</text>
				</view>

				<view class="text-line">
					<text class="text-name">备注:</text>
					<text class="text-value">{{filterNull(compulsoryDetail.compulsoryRemark)}}</text>
				</view>

				<view class="text-line">
					<text class="text-name">费用:</text>
					<text
						class="text-value">￥{{ compulsoryDetail.compulsoryAmount?compulsoryDetail.compulsoryAmount:'0' }}</text>
				</view>

				<view style="margin: 0 0 20upx 20upx;" v-if="compulsoryDetail.compulsoryUrlList.length>0">
					<view class="text-name" style="margin-bottom: 18upx;">保单照片</view>
					<u-album :urls="compulsoryDetail.compulsoryUrlList" rowCount="4"></u-album>
				</view>

				<view class="text-line" v-if="compulsoryDetail.compulsoryAccessoryVOList!=null"
					v-for="(item, index) in compulsoryDetail.compulsoryAccessoryVOList" :key="index"
					@click="checkFile(item)">
					<view class="text-name">{{item.nameAccessory}}</view>
					<view class="text-value" style="color: #12B9A3;">查看</view>
				</view>


			</view>
			<no-data v-if='compulsoryDetail==null' content="暂无交强险"></no-data>

		</view>

		<!-- 商业险 -->
		<view class="item">

			<view class="title-wrap">
				<u-icon name="order" color="#12B9A3" label="商业险保单信息" label-color="#333333"></u-icon>
				<view class="warn-info">
					{{ commercialDetail.syPolicyPrescriptionStr ? commercialDetail.syPolicyPrescriptionStr : '' }}
				</view>
			</view>


			<view v-if="commercialDetail!=null">

				<view class="text-line">
					<text class="text-name">商业险开始时间:</text>
					<text class="text-value">{{filterNull(commercialDetail.commercialStartTime)}}</text>
				</view>

				<view class="text-line">
					<text class="text-name">商业险结束时间:</text>
					<text class="text-value">{{filterNull(commercialDetail.commercialEndTime)}}</text>
				</view>

				<view class="text-line">
					<text class="text-name">商业险保单号:</text>
					<text class="text-value">{{filterNull(commercialDetail.commercialNo)}}</text>
				</view>

				<view class="text-line">
					<text class="text-name">保险公司:</text>
					<text class="text-value">{{filterNull(commercialDetail.commercialCompany)}}</text>
				</view>

				<view class="text-line">
					<text class="text-name">保险公司联系电话:</text>
					<text class="text-value">{{filterNull(commercialDetail.commercialCompanyPhone)}}</text>
				</view>

				<view class="text-line">
					<text class="text-name">备注:</text>
					<text class="text-value">{{filterNull(commercialDetail.commercialRemark)}}</text>
				</view>

				<view class="text-line">
					<text class="text-name">费用:</text>
					<text
						class="text-value">￥{{ commercialDetail.commercialAmount?commercialDetail.commercialAmount:'0' }}</text>
				</view>

				<view style="margin: 0 0 20upx 20upx;" v-if="commercialDetail.commercialUrlList.length>0">
					<view class="text-name" style="margin-bottom: 18upx;">保单照片</view>
					<u-album :urls="commercialDetail.commercialUrlList" rowCount="4"></u-album>
				</view>

				<view class="text-line" v-if="commercialDetail.commercialAccessoryVOList!=null"
					v-for="(item, index) in commercialDetail.commercialAccessoryVOList" :key="index"
					@click="checkFile(item)">
					<view class="text-name">{{item.nameAccessory}}</view>
					<view class="text-value" style="color: #12B9A3;">查看</view>
				</view>


			</view>
			<no-data v-if='commercialDetail==null' content="暂无商业险"></no-data>

		</view>


		<!-- 年检 -->
		<view class="item">

			<view class="title-wrap">
				<u-icon name="order" color="#12B9A3" label="年检信息" label-color="#333333"></u-icon>
				<view class="warn-info">
					{{ annualInspection.prompt ? annualInspection.prompt : '' }}
				</view>
			</view>


			<view v-if="annualInspection && annualInspection.inspectionId">

				<view class="text-line">
					<text class="text-name">本次年检时间:</text>
					<text class="text-value">{{filterNull(annualInspection.thisTimeInspectionTime)}}</text>
				</view>

				<view class="text-line">
					<text class="text-name">下次年检时间:</text>
					<text class="text-value">{{filterNull(annualInspection.nextInspectionTime)}}</text>
				</view>

				<view class="text-line">
					<text class="text-name">年审代理人:</text>
					<text class="text-value">{{filterNull(annualInspection.inspectionAgent)}}</text>
				</view>

				<view class="text-line">
					<text class="text-name">备注:</text>
					<text class="text-value">{{filterNull(annualInspection.remark)}}</text>
				</view>

				<view style="margin: 0 0 20upx 20upx;" v-if="annualInspection.inspectionUrlList.length>0">
					<view class="text-name" style="margin-bottom: 18upx;">年检附件</view>
					<u-album :urls="annualInspection.inspectionUrlList" rowCount="4"></u-album>
				</view>

				<view class="text-line" v-if="annualInspection.inspectionList!=null"
					v-for="(item, index) in annualInspection.inspectionList" :key="index" @click="checkFile(item)">
					<view class="text-name">{{item.nameAccessory}}</view>
					<view class="text-value" style="color: #12B9A3;">查看</view>
				</view>


			</view>
			<no-data v-else content="暂无年检"></no-data>
		</view>

		<!-- 保养 -->
		<view class="item">

			<view class="title-wrap">
				<u-icon name="order" color="#12B9A3" label="保养信息" label-color="#333333"></u-icon>
				<view class="warn-info">
					{{ maintenance.prompt ? maintenance.prompt : '' }}
				</view>
			</view>


			<view v-if="maintenance && maintenance.maintenanceId">

				<view class="text-line">
					<text class="text-name">服务站名称:</text>
					<text class="text-value">{{filterNull(maintenance.serviceSite)}}</text>
				</view>

				<view class="text-line">
					<text class="text-name">下次保养公里数:</text>
					<text class="text-value">{{maintenance.nextMile ? maintenance.nextMile + '/km' : '--'}}</text>
					<text class="text-value" style="color: #E04B28;"
						v-if="maintenance.isNextMilePromptStr">{{maintenance.isNextMilePromptStr}}</text>
				</view>

				<view class="text-line">
					<text class="text-name">下次保养时间:</text>
					<text class="text-value">{{filterNull(maintenance.nextDate)}}</text>
					<text class="text-value" style="color: #E04B28;"
						v-if="maintenance.isNextDatePromptStr">{{maintenance.isNextDatePromptStr}}</text>
				</view>

				<view class="text-line">
					<text class="text-name">本次保养时间:</text>
					<text class="text-value">{{filterNull(maintenance.maintenanceDate)}}</text>
				</view>

				<view class="text-line">
					<text class="text-name">备注:</text>
					<text class="text-value">{{filterNull(maintenance.maintenanceRemark)}}</text>
				</view>

				<view style="margin: 0 0 20upx 20upx;" v-if="maintenance.maintenanceUrlList.length>0">
					<view class="text-name" style="margin-bottom: 18upx;">保养附件</view>
					<u-album :urls="maintenance.maintenanceUrlList" rowCount="4"></u-album>
				</view>

				<view class="text-line" v-if="maintenance.maintenanceFileLis!=null"
					v-for="(item, index) in maintenance.maintenanceFileLis" :key="index" @click="checkFile(item)">
					<view class="text-name">{{item.nameAccessory}}</view>
					<view class="text-value" style="color: #12B9A3;">查看</view>
				</view>


			</view>
			<no-data v-else content="暂无保养"></no-data>
		</view>



	</view>
</template>

<script>
	import {
		mycarinfo
	} from '../../../../common/api.js';

	export default {
		data() {
			return {
				carId: '',
				vehicleData: {},
				commercialDetail: null, // 商业险
				compulsoryDetail: null, // 交强险
				annualInspection: null, // 年检
				maintenance: null, // 保养
			}
		},
		methods: {
			getCarInfo() {
				mycarinfo({
					params: {
						carId: this.carId,
					}
				}).then(res => {
					this.commercialDetail = res.commercialInsuranceInfo; // 商业险
					this.compulsoryDetail = res.compulsoryInsuranceManageInfo; // 交强险
					this.annualInspection = res.inspectionInfo; // 年检
					this.maintenance = res.maintenanceInfo; // 保养
					this.vehicleInfo = res;
 

					this.commercialDetail.commercialUrlList = this.addpre(this.commercialDetail.commercialUrlList);
					this.compulsoryDetail.compulsoryUrlList = this.addpre(this.compulsoryDetail.compulsoryUrlList);
					this.annualInspection.inspectionUrlList = this.addpre(this.annualInspection.inspectionUrlList);
					this.maintenance.maintenanceUrlList = this.addpre(this.maintenance.maintenanceUrlList);
				})
			},

			checkFile(item) {
				uni.downloadFile({
					url: this.baseImageUrl + item.url,
					success: function(res) {
						var filePath = res.tempFilePath;
						uni.openDocument({
							filePath: filePath,
							showMenu: true,
							success: function(res) {
								console.log('打开文档成功');
							}
						});
					}
				});
			},

			addpre(list) {
				if (!uni.$u.test.isEmpty(list)) {
					list = list.map(
						(url) => this.baseImageUrl + url
					)
				}
				return list;
			},
		},

		onLoad(op) {
			this.carId = op.carId;
			this.getCarInfo();
		}

	}
</script>

<style lang="scss" scoped>
	.order-status {
		height: 40upx;
		padding: 5upx 20upx;
		background: linear-gradient(#15e8c9 0%, #13ceb5 100%);
		border-radius: 20px 0px 0px 20px;
		font-size: 26upx;
		font-weight: 500;
		text-align: center;
		color: #ffffff;
	}

	.carinfo {
		@include flex(column);
		align-items: center;
		justify-content: center;
	}

	.carno {
		font-size: 36upx;
		color: $black33;
		font-weight: bold;
		margin: 20upx 0 10upx;
	}

	.carmodel {
		font-size: 26upx;
		color: $graya7;
		margin-bottom: 15upx;
	}

	.carusetype {
		color: $white;
		font-size: 28upx;
		background-color: $yellowffc;
		padding: 8upx 60upx;
		border-radius: 90upx;
		margin-bottom: 15upx;
	}
</style>
